<template>
  <div class="login">
    <!-- 顶部 -->
    <van-nav-bar title="登录">
      <span slot="left" @click="$router.go(-1)">
        <i slot="icon" class="iconfont icon-zhiyuanfanhui17"></i>
      </span>
    </van-nav-bar>

    <!-- 内容部分 -->
    <div class="content">
      <van-cell-group>
        <van-field
          v-model="userInfo.username"
          placeholder="请输入用户名"
        />

        <van-field
          v-model="userInfo.password"
          :type="passType"
          right-icon="eye-o"
          placeholder="请输入密码"
          @click-right-icon="showPass"
        />
      </van-cell-group>
      <van-button size="large" @click="userLogin">登录</van-button>
      <span class="register" @click="jumpToRegister">免费注册</span>
    </div>
    <!-- 底部标签页 -->
    <van-tabbar v-model="active" active-color="#ff8c00">
      <van-tabbar-item icon="home-o" @click="jumpToHome">首页</van-tabbar-item>
      <van-tabbar-item>
        <i slot="icon" class="iconfont icon-caidan1" @click="jumpToCate"></i>分类
      </van-tabbar-item>
      <van-tabbar-item>
        <i slot="icon" class="iconfont icon-ai-cart"></i>购物车
      </van-tabbar-item>
      <van-tabbar-item>
        <i slot="icon" class="iconfont icon-huiyuan21" @click="jumpToInfo"></i>会员中心
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { login } from '@/api'
export default {
  data () {
    return {
      active: -1,
      userInfo: {
        username: '',
        password: ''
      },
      passType: 'password'// 密码框的显示类型
    }
  },
  methods: {
    userLogin () {
      login(this.userInfo)
        .then(res => {
          console.log(res)
          if (res.data.success) {
            localStorage.setItem('userInfo', JSON.stringify(this.userInfo))
            this.$toast('登录成功')
            setTimeout(() => {
              this.$router.go(-1)
            }, 500)
          } else {
            this.$toast(res.data.message)
          }
        })
    },
    showPass () {
      if (this.passType === 'text') {
        this.passType = 'password'
      } else {
        this.passType = 'text'
      }
    },
    jumpToCate () {
      this.$router.push({ name: 'category' })
    },
    jumpToHome () {
      this.$router.push({ name: 'home' })
    },
    jumpToInfo () {
      this.$router.push({ name: 'userinfo' })
    },
    jumpToRegister () {
      this.$router.push({ name: 'register' })
    }
  }
}
</script>

<style lang="scss" scoped>
.van-nav-bar {
      background-color: #006699;
      .van-nav-bar__title {
        color: #fff;
        font-size: 17px;
        font-weight: blod;
      }
      .icon-zhiyuanfanhui17 {
        color: #fff;
        font-size: 17px;
      }
}
.content{
  padding: 10px;
  .van-button--default{
    background-color: #007aff;
    color:#fff;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    margin-top: 20px;
  }
  .register{
    float: right;
    color: #007aff;
    font-size: 14px;
    margin-top: 10px;
  }
}
//底部标签页
.van-hairline--top-bottom {
  background-color: #006699;
  .van-tabbar-item {
    color: #fff;
  }
}

</style>
